<template>
    <!-- 榜单 -->
    <div id="inList">
        <div class="title">
            {{ regionID }}榜
        </div>
        <div class="but">
            <el-button class="but">全部播放</el-button>
            <el-button class="but">默认按钮</el-button>
            <el-button class="but">默认按钮</el-button>
        </div>
        <div class="body">
            <el-table :data="songData" stripe highlight-current-row>
                <el-table-column type="index" :index="indexMethod" width="80">
                </el-table-column>
                <el-table-column prop="songName" label="歌曲" width="320">
                </el-table-column>
                <el-table-column prop="singerName" label="歌手" width="300">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="favorites(scope.$index, scope.row)">
                            收藏
                        </el-button>
                        <el-button size="mini" @click="play(scope.$index, scope.row)">
                            播放
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="时长">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    props:["regionID","url"],
    data() {
        return {
            url: this.$route.query.url?this.$route.query.url:this.url,
            regionID: this.$route.query.regionID?this.$route.query.regionID:this.regionID,
            songData: null,
        }
    },
    methods: {
        indexMethod(index) {
            return index + 1;
        },
        favorites: function (index, row) {
            this.axios({
                url: "/api/users/songLike",
                params: {
                    songID: row.songsID,
                    userID: this.user.userID
                }
            }).then(res => {
                if (res.data.code == 401) {
                    this.userDel()
                    this.$message({
                        message: '请先登录',
                        type: 'warning'
                    });
                } else {
                    this.$message({
                        message: '收藏成功',
                        type: 'success'
                    });
                }
            }).catch(err => {
                console.log("歌曲收藏错误", err);
            })
        },
        play() {

        }
    },
    watch: {
        $route() {
            this.$router.go()
        }
    },
    created: function () {
        // console.log(this.url);
        // console.log(this.regionID);
        this.axios({
            url: "/api/" + this.url,
            params: {
                regionID: this.regionID
            }
        }).then(res => {
            // console.log(res.data.data.data);
            this.songData = res.data.data.data.slice(0, 20)
            this.songData.forEach(i => {
                if (i.length > 1) {
                    i.singerName = i.singerName.join("--")
                } else {
                    i.singerName = i.singerName[0]
                }
            });
            console.log(this.songData[0]);
        }).catch(err => {
            console.log(this.url, "+请求失败+");
        })
    }
}
</script>

<style scoped>
#inList .but /deep/:hover {
    background-color: plum;
    color: white;
}
</style>

<style>
#inList {
    /* background: plum; */
    text-align: left;
}

#inList .title {
    margin: 10px;
    font-size: 30px;
}

#inList .but {
    margin: 10px;
}
</style>